<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="Description" content="drag and drop table columns, bootstrap style, javascript, jquery" />
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<title>Drag & Drop Table Columns v.0.1.3</title>
	<meta name="Keywords" content="drag, drop, table, columns, bootstrap, style, javascript, jquery">
	<meta name="Robots" content="all">
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="Revizit-after" content="7 days">
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
	<link rel="stylesheet" href="css/dragndrop.table.columns.css" />

</head>
<body>
	<div class="table-responsive container">
		<nav class="navbar navbar-default navbar-inverse" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="https://github.com/alexshnur/" class="btn btn-success navbar-btn"><span>My page on GitHub</span></a>
				</div>
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li> </li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">More plugins <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="http://alexshnur.github.io/drag-n-drop-table-columns/">Drag & Drop Table Columns</a></li>
								<li><a href="http://alexshnur.github.io/dynamic-url-params-from-in-form/">Dynamic URL params from/in form</a></li>
								<li><a href="#">Resizable table columns</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<section class="clearfix">
			<a href="https://github.com/alexshnur/drag-n-drop-table-columns/zipball/master" class="btn btn-primary"><span>Download .zip</span></a>
			<a href="https://github.com/alexshnur/drag-n-drop-table-columns/tarball/master" class="btn btn-primary"><span>Download .tar.gz</span></a>
			<a href="https://github.com/alexshnur/drag-n-drop-table-columns" class="btn btn-warning pull-right"><span>View on GitHub</span></a>
		</section>

		<!-- AddThis Button BEGIN -->
		<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
			<a class="addthis_button_facebook"></a>
			<a class="addthis_button_twitter"></a>
			<a class="addthis_button_vk"></a>
			<a class="addthis_button_google_plusone_share"></a>
			<a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a>
		</div>
		<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
		<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4f2a64cb4f856bf8"></script>
		<!-- AddThis Button END -->

		<h1>Drag & Drop Table Columns v.0.1.3</h1>
		<blockquote><p class="text-warning">Work in IE9+, Google Chrome, Mozzila Firefox</p></blockquote>
		<table class="table table-bordered table-hover">
			<thead>
				<tr class="dnd-moved">
					<th>Column #1</th>
					<th>Column #2</th>
					<th>Column #3</th>
					<th>Column #4</th>
					<th>Column #5</th>
				</tr>
			</thead>
			<tbody>
				<tr class="dnd-moved info">
					<td>Row #1-1</td>
					<td>Row #1-2</td>
					<td>Row #1-3</td>
					<td>Row #1-4</td>
					<td>Row #1-5</td>
				</tr>
				<tr class="dnd-moved">
					<td>Row #2-1</td>
					<td>Row #2-2</td>
					<td>Row #2-3</td>
					<td>Row #2-4</td>
					<td>Row #2-5</td>
				</tr>
				<tr class="dnd-moved success">
					<td>Row #3-1</td>
					<td>Row #3-2</td>
					<td>Row #3-3</td>
					<td>Row #3-4</td>
					<td>Row #3-5</td>
				</tr>
			</tbody>
		</table>

		<code>&lt;link rel="stylesheet" href="css/dragndrop.table.columns.css" /&gt;</code><br /><br />

		<pre>
&lt;table class="table table-bordered table-hover"&gt;
	&lt;thead&gt;
		&lt;tr class="dnd-moved"&gt;
			&lt;th&gt;Column #1&lt;/th&gt;
			&lt;th&gt;Column #2&lt;/th&gt;
			&lt;th&gt;Column #3&lt;/th&gt;
			&lt;th&gt;Column #4&lt;/th&gt;
			&lt;th&gt;Column #5&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody&gt;
		&lt;tr class="dnd-moved"&gt;
			&lt;td&gt;Row #1-1&lt;/td&gt;
			&lt;td&gt;Row #1-2&lt;/td&gt;
			&lt;td&gt;Row #1-3&lt;/td&gt;
			&lt;td&gt;Row #1-4&lt;/td&gt;
			&lt;td&gt;Row #1-5&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr class="dnd-moved"&gt;
			&lt;td&gt;Row #2-1&lt;/td&gt;
			&lt;td&gt;Row #2-2&lt;/td&gt;
			&lt;td&gt;Row #2-3&lt;/td&gt;
			&lt;td&gt;Row #2-4&lt;/td&gt;
			&lt;td&gt;Row #2-5&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr class="dnd-moved"&gt;
			&lt;td&gt;Row #3-1&lt;/td&gt;
			&lt;td&gt;Row #3-2&lt;/td&gt;
			&lt;td&gt;Row #3-3&lt;/td&gt;
			&lt;td&gt;Row #3-4&lt;/td&gt;
			&lt;td&gt;Row #3-5&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;</pre>
		<code>&lt;script src="js/jquery-1.11.0.min.js"&gt;&lt;/script&gt;</code><br />
		<code>&lt;script src="js/dragndrop.table.columns.js"&gt;&lt;/script&gt;</code><br />
		<code>&lt;script&gt;</code><br />
		<code>	$('.table').dragableColumns();</code><br />
		<code>&lt;/script&gt;</code><br /><br />
		<blockquote><p class="text-warning">Use parameters for Drag Table Columns</p></blockquote>
	<pre>
$('.table').dragableColumns({
   drag: true,
   dragClass: 'drag',
   overClass: 'over',
   movedContainerSelector: '.dnd-moved'
});</pre>

	</div>
	<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
	<script src="js/dragndrop.table.columns.js" type="text/javascript"></script>
	<script>
		$('.table').dragableColumns();
	</script>
</body>
</html>